<script setup>
import {onMounted, ref} from 'vue'
import {Head, useForm} from '@inertiajs/vue3';
import {Message} from "@arco-design/web-vue";
import {IconLock, IconMobile, IconSafe} from "@arco-design/web-vue/es/icon";
import {route} from "ziggy-js";

const captchaSrc = ref(`/captcha/math?t=${Math.random()}`)
const FormRef = ref()
const form = useForm({
    phone: '',
    password: '',
    captcha: '',
    remember: true,
})

const rules = ref({
    phone: [
        {required: true, length: 11, message: '请输入正确的手机号', trigger: ['blur']},
        {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
    ],
    password: [
        {required: true, message: '请输入密码', trigger: ['blur']},
        {minLength: 6, maxLength: 16, message: '密码长度应为6-16位', trigger: ['blur']},
        {pattern: /^(?=.*[A-Za-z])(?=.*\d).+$/, message: '密码必须包含字母和数字', trigger: ['blur']}
    ],
    captcha: [{required: true, message: '请输入图形验证码', trigger: ['blur']}],
})

const reloadCaptcha = () => {
    captchaSrc.value = `/captcha/math?t=${Math.random()}`;
}

const handleSubmit = async() => {
    try {
        await FormRef.value.validate();
    } catch (error) {
        console.log(error)
        return;
    }

    form.post(route('admin.authenticate'), {
        onSuccess: () => Message.success('登录成功'),
        onError: (errors) => {
            reloadCaptcha();
            const fields = {};
            for (const [field, messages] of Object.entries(errors)) {
                fields[field] = {
                    status: 'error',
                    message: messages
                };
            }
            FormRef.value.setFields(fields);
        }
    });
}

onMounted(() => {
    captchaSrc.value = `/captcha/math?t=${Math.random()}`;
})
</script>

<template>
    <Head>
        <title>登录 - 管理系统</title>
    </Head>
    <div
        class="login font-sans absolute inset-0 size-full flex justify-center items-center bg-cover bg-center bg-no-repeat ">
        <div class="flex justify-between items-center">
            <a-card
                :body-style="{ padding: '22px 32px' }"
                :bordered="false"
                :header-style="{ borderBottom: 'none' }"
                :hoverable="true"
                :style="{
                    borderRadius: '12px',
                    boxShadow: '0 10px 30px 0 rgba(0, 0, 0, 0.1)',
                }"
                class="w-[460px]"
            >
                <a-space :size="32" direction="vertical" fill >
                    <div class="flex flex-col gap-8 select-none ">
                        <div class="flex justify-center items-center">
                            <img
                                :style="{ width: '48px', height: '48px' }"
                                alt="后台管理"
                                src="/static/images/logo-w.png"
                            />
                            <span class="text-xl font-bold text-black font-mono">
                                后台管理
                            </span>
                        </div>

                        <span class="text-base font-bold text-black">
                            登录回来
                        </span>
                    </div>

                    <a-form
                        ref="FormRef"
                        :model="form"
                        :rules="rules"
                        :style="{ width: '100%' }"
                        class="mt-4"
                        layout="vertical"
                        size="large"
                        @submit="handleSubmit"
                    >
                        <a-form-item
                            :hide-label="true"
                            field="phone"
                        >
                            <a-input
                                v-model="form.phone"
                                allow-clear
                                autocomplete="off"
                                placeholder="请输入登录手机号"
                            >
                                <template #prefix>
                                    <icon-mobile/>
                                </template>
                            </a-input>
                        </a-form-item>

                        <a-form-item
                            :hide-label="true"
                            field="password"
                        >
                            <a-input-password
                                v-model="form.password"
                                allow-clear
                                autocomplete="off"
                                placeholder="请输入登录密码"
                            >
                                <template #prefix>
                                    <icon-lock/>
                                </template>
                            </a-input-password>
                        </a-form-item>

                        <a-form-item
                            :hide-label="true"
                            field="captcha"
                        >
                            <div class="flex items-center w-full gap-3">
                                <a-input
                                    v-model="form.captcha"
                                    allow-clear
                                    autocomplete="off"
                                    class="flex-1"
                                    placeholder="请输入图形验证码"
                                >
                                    <template #prefix>
                                        <icon-safe/>
                                    </template>
                                </a-input>
                                <div class="w-[120px] h-[40px] cursor-pointer rounded-md overflow-hidden" @click="reloadCaptcha">
                                    <img
                                        :src="captchaSrc"
                                        alt="图形验证码"
                                        class="w-full h-full object-cover transition-all hover:opacity-90"
                                    />
                                </div>
                            </div>
                        </a-form-item>
                        <a-form-item>
                            <div class="flex justify-between items-center">
                                <a-checkbox v-model="form.remember" value="true">记住密码</a-checkbox>
                            </div>
                        </a-form-item>

                        <a-form-item>
                            <a-button
                                :loading="form.processing"
                                class="login-btn"
                                html-type="submit"
                                long
                                size="large"
                                type="primary"
                            >
                                {{ form.processing ? '登录中...' : '登录' }}
                            </a-button>
                        </a-form-item>
                    </a-form>
                </a-space>
            </a-card>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.login-btn{
    border-radius: 6px;
    height: 42px;
    transition: all 0.3s ease;
}

.login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.login{
    background: url('/static/images/OIP-C.webp') no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 添加卡片悬停效果 */
:deep(.arco-card) {
    transition: all 0.3s ease;
}

:deep(.arco-card:hover) {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* 表单输入框聚焦效果 */
:deep(.arco-input-focused) {
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
}
</style>
